<!DOCTYPE html>
<html lang="zh">

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.19.1/dist/bootstrap-table.min.css" integrity="sha256-ZD9Tb2mCr01yh68j+JrUV91+SoL5xpUzChErCIHDCko=" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tempusdominus-bootstrap-4@5.1.2/build/css/tempusdominus-bootstrap-4.min.css" integrity="sha256-vi00YWza8MRCSI5GdsFLptAZIULny5MPn62PxEf/ZTY=" crossorigin="anonymous">
    <link rel="stylesheet" href="../css/options.css">
    <link rel="icon" href="../img/icon-128.png">
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>QQ空间导出助手-选项</title>
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.19.1/dist/bootstrap-table.min.js" integrity="sha256-BqVxqb61C9Xd1gUXFZd13+wfPnmP/zj7EXriNQ3Jup0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.19.1/dist/locale/bootstrap-table-zh-CN.min.js" integrity="sha256-pE+tLWBaNzEJufpbligmXg6jcxEHGXrWjQe4rv3yUNY=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/template_js@2.2.1/dist/index.aio.min.js" integrity="sha256-gnK+GsIXEBgu/mJouMDtUxXvXM3M0jzxNYmjnlsifgY=" crossorigin="anonymous"></script>
</head>

<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
            <a class="navbar-brand" target="_blank" href="https://github.com/ShunCai/QZoneExport">QQ空间导出助手</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a id="setting-link" class="nav-link" href="options.html">设置</a>
                    </li>
                    <li class="nav-item active">
                        <a id="about-link" class="nav-link" href="tools.html">工具<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a id="about-link" class="nav-link" href="about.html">关于</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <main role="main" style="position: relative;top: 56px;">
        <div class="tab-content" id="v-pills-tabContent">
            <div class="tab-pane fade show active" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
                <div class="container-fluid">
                    <nav>
                        <div class="nav nav-tabs" id="nav-tab" role="tablist">
                            <a class="nav-item nav-link active" id="nav-messages-tab" data-toggle="tab" href="#nav-messages" role="tab" aria-controls="nav-messages" aria-selected="false">本地相册</a>
                        </div>
                    </nav>
                    <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade show active" id="nav-messages" role="tabpanel" aria-labelledby="nav-messages-tab">
                            <p class="mt-2 text-muted">基于已备份的QQ空间数据，添加本地相册，仅适用HTML备份方式</p>
                            <div id="toolbar">
                                <button id="selectFolder" class="btn btn-secondary" data-toggle="tooltip" title="选择QQ空间备份文件夹">
                                  <i class="fa fa-folder"></i>选择文件夹
                                </button>
                                <button id="generateAlbums" class="btn btn-primary" disabled>
                                  <i class="fa fa-photo"></i>生成本地相册
                                </button>
                                <small id='localAlbums-tips' class="ml-3 text-primary">先选择已备份的QQ空间备份文件夹，再点击生成本地相册</small>
                            </div>
                            <table id="localAlbums" data-toolbar="#toolbar"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="3000" style="position: absolute; bottom: 10px; right: 20px;">
        <div class="toast-header">
            <img width="20px" height="20px" src="../img/icon-128.png" class="rounded mr-2" alt="...">
            <strong class="mr-auto">提示</strong>
            <small>刚刚</small>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
        </div>
        <div class="toast-body">

        </div>
    </div>
    <script src="../js/config.js"></script>
    <script src="../js/utils.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/modules/common.js"></script>
    <script src="../js/tools.js"></script>
</body>

</html>